<template>
	<view class="pages">
		<cu-custom :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<view class="item-box " :style="[{height:swiperHeight+'px'}]">
			<mescroll-uni :fixed="false" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
				@init="mescrollInit" style="height: 100%;">
				<view class="item-card" v-for="(item,index) in list" @click="orderInfo(item)" :class="index==0?'indexMargin':'marginTop'">
					<view class="item-card-head ">
						<image :src="item.servers.icon" class="icon-sm" mode="" @error="errorimg(index)"></image>
						<text class="item-card-head-name">{{item.server_name}}</text>
						<text class="order-status" v-if="item.order_status==0">待处理</text>
						<text v-else-if="item.order_status == 1 " class="blue-color order-status">处理中</text>
						<text v-else-if="item.order_status == 2 " class="blue-color order-status">已完成</text>
						<text class="order-status" v-else-if="item.order_status == 3 ">已取消</text>
						
					</view>
					<view class="item-card-desc">
						<view class="item-card-desc1">
							<text class="item-card-d-title">
								故障描述：
							</text>
							<TextOver :content="item.desc" :num="40" :isFixed="false" :pading='0' style="height: 100%;"
								:type="1"></TextOver>
						</view>
					</view>
				    <view class="item-card-foot">
						<text>单号：{{item.order_sn}}</text>
				    	<text>{{item.created_at}}</text>
				    </view>
				</view>
			</mescroll-uni>

		</view>

	</view>

</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	import TextOver from '@/components/text-over.vue'
	export default {
		components: {
			MescrollUni,
			TextOver
		},
		name: "User",
		data() {
			return {
				title: "报修记录",
				StatusBar: this.Custom,
				swiperHeight: 0,
				mescroll: null,
				list:[],
				downOption: {
					use: true, 
					auto: false,
				},
				upOption: {
					use: true, 
					auto: true,
					page: {
						num: 0, 
						size: 10 
					},
					onScroll: true,
					noMoreSize: 5,
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: ''
				},
				reply: {
					reply_content: "家里马桶老是有哗啦啦的水声，或者经常有细小的水流，这是马桶漏水了！马桶漏水不仅非常浪费水，还吵的人心烦。"
				},
				

			}


		},
		onLoad(option) {
			// (option) ? (() => {
			// 	let item = JSON.parse(option.item);
			// 	this.title = item.name;
			// })() : "";

		},
		mounted() {
			this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height);
		},
		methods: {
			errorimg(index){
				this.list[index].servers.icon=this.resDomain+"/static/img/error.png";				
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			
			},
			upCallback(mescroll) {
				this.apiRequest('/buyer/ServerOrderList', {
					area_id: uni.getStorageSync('area_id'),
					page: mescroll.num,
					limit: mescroll.size,
				}, 0,'GET').then(res => {
					if (res.code != 200) {
						mescroll.endSuccess()
					}
					if (mescroll.num == 1) {
						this.list = [];
					}
					
					this.list = this.list.concat(res.data.data) //追加新数据
					this.list=this.list.reverse();
					mescroll.endByPage(this.list.length, res.data.totalPage);

				})
			},
			orderInfo(option){
				
				uni.navigateTo({
					url:"./orderInfo?order_id="+option.order_id,
					animationType:"slide-in-right"
				})
				
			}

		}

	}
</script>

<style scoped>
	.pages{
		overflow: hidden;
	}
	.item-box {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.item-card {
		width: 92%;
		min-height: 114upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		
		display: flex;
		flex-direction: column;
		padding-bottom: 20upx;
		padding-top: 20upx;
	}

	.item-card view {
		width: 94%;
		margin: auto;
	}

	.item-card-head {
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}
	.item-card-foot{
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		justify-content: space-between;
	}
	.indexMargin{
		margin: auto;
	}
	.marginTop{
		margin: 20upx auto;
	}

	.icon-sm {
		width: 60upx;
		height: 60upx;
	}

	.item-card-head-name {
		font-size: 32upx;
		font-weight: 500;
		color: #333333;
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 20upx;
	}

	.order-status {
		width: 20%;
		height: 100%;
		font-size: 24upx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;
		position: absolute;
		float: right;
		right: 0;
		justify-content: flex-end;
	}

	.item-card-desc {
		background: #F7F7F7;
		border-radius: 10px;
		padding: 20upx;

	}

	.item-card-desc1 {
		width: 94%;
		margin: 10upx 3%;
		min-height: 40upx;
		display: flex;
		flex-direction: row;
		padding: 10upx;
	}

	.item-card-d-title {
		white-space: nowrap;
	}
</style>
